<template>
  <div style="border: 1px solid #f5f5f5">
    <div style="border: 1px solid #f5f5f5">
      <Toolbar
        style="border-bottom: 1px solid #f5f5f5"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="rich_text"
        :defaultConfig="editorConfig"
        @onCreated="handleCreated"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { shallowRef, ref } from "vue";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

const rich_text = ref("");
const toolbarConfig = {};
const editorConfig = {
  placeholder: "请输入内容...",
};

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
// editorConfig.MENU_CONF['uploadImage'] = {
//     // 其他配置...
//     server:"",
//     // 小于该值就插入 base64 格式（而不上传），默认为 0
//     base64LimitSize: 5 * 1024 // 5kb
// }
</script>
